<template>
  <div>
    <!-- ref: 1:原生标签获取dom  2:组件标签上获取组件实例（组件this）
      标签  ref='值'  this.$refs.值 
    $parent:子组件获取父组件实例
    -->
    <div ref="xxx">Hello</div>
    <button @click="getDom">获取Div的dom</button>
    <hr />
    <button @click="setSon">获取并修改子组件内数据</button>
    <TestCom ref="son"></TestCom>
  </div>
</template>
<script>
import TestCom from '@/components/TestCom'
export default {
  components: {
    TestCom
  },
  methods: {
    getDom () {
      console.log('父组件', [this.$refs.xxx])
    },
    setSon () {
      this.$refs.son.test()
      this.$refs.son.num = Math.random() * 999
      console.log(this.$refs.son.num)
    }
  }
}
</script>
<style></style>
>
